import React, { useEffect, useRef } from 'react'
import {
  View,
  Text,
  ScrollView,
  Animated
} from 'react-native'

export default () => {
  const fadeAnim = new Animated.Value(0)

  const startAnim = () => {
    fadeAnim.setValue(0)
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start(startAnim)
  }
  useEffect(() => {
    startAnim()
  }, [fadeAnim])

  return (
    <View style={styles.container}>
      <Animated.View 
        style={{
          opacity:fadeAnim, 
          transform:[{
            scale: fadeAnim.interpolate({ inputRange: [0, 1], outputRange: [0,5]}),
          }]}}
      >
        <Text>Shelf</Text>
      </Animated.View>
    </View>
  )
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
}